<template>
  <div class="custom-home">
    <!-- Hero Section -->
    <section class="hero-section">
      <div class="hero-bg-decoration"></div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-badge">
            <span class="badge-emoji">🎬</span>
            开源免费 · 用心打造
          </div>
          <h1 class="hero-title">
            给你的视频<br>
            <span class="gradient-text">一副好字幕</span>
          </h1>
          <p class="hero-description">
            不只是转录文字，更懂语义和语境<br>
            让 AI 帮你把字幕做得像人工精修一样好
          </p>
          <div class="hero-stats-inline">
            <span class="stat-inline">⚡ 4分钟处理14分钟视频</span>
            <span class="stat-divider">·</span>
            <span class="stat-inline">💰 成本不足 ¥0.01</span>
            <span class="stat-divider">·</span>
            <span class="stat-inline">🌍 支持99种语言</span>
          </div>
          <div class="hero-actions">
            <a href="/guide/getting-started" class="btn-primary">
              <span>立即开始</span>
              <span class="btn-arrow">→</span>
            </a>
            <a href="https://github.com/WEIFENG2333/VideoCaptioner" class="btn-secondary">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
              </svg>
              <span>看看源码</span>
            </a>
          </div>
        </div>
        <div class="hero-visual">
          <div class="visual-card">
            <div class="card-decoration"></div>
            <img src="https://h1.appinn.me/file/1731487405884_main.png" alt="VideoCaptioner 界面预览">
            <div class="card-badge">实时预览</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">95%+</div>
            <div class="stat-label">识别准确度</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">99</div>
            <div class="stat-label">支持语言</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">4min</div>
            <div class="stat-label">处理14分钟视频</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">¥0.01</div>
            <div class="stat-label">单视频成本</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">我们在乎的事情</h2>
          <p class="section-subtitle">这些功能，都是为了让你更轻松</p>
        </div>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon-wrap">
              <div class="feature-icon">⚡</div>
            </div>
            <h3 class="feature-title">快，真的快</h3>
            <p class="feature-desc">14分钟视频只需4分钟处理。你去泡杯咖啡的功夫，字幕就好了</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon-wrap">
              <div class="feature-icon">🧠</div>
            </div>
            <h3 class="feature-title">懂语义，不只是转录</h3>
            <p class="feature-desc">LLM 会帮你智能断句、纠正错别字、统一专业术语。就像有个助手在帮你</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon-wrap">
              <div class="feature-icon">🌍</div>
            </div>
            <h3 class="feature-title">全球化不是梦</h3>
            <p class="feature-desc">99种语言识别，37种语言翻译。你的内容可以触达全世界</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon-wrap">
              <div class="feature-icon">💝</div>
            </div>
            <h3 class="feature-title">完全免费，永久开源</h3>
            <p class="feature-desc">MIT 协议，代码透明。你的数据在本地，隐私完全掌控在自己手里</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon-wrap">
              <div class="feature-icon">🏠</div>
            </div>
            <h3 class="feature-title">老电脑也能用</h3>
            <p class="feature-desc">不需要昂贵的显卡。有 CPU 就能跑，有 GPU 更快。云端和本地随你选</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon-wrap">
              <div class="feature-icon">🎨</div>
            </div>
            <h3 class="feature-title">样式随心调</h3>
            <p class="feature-desc">科普风、新闻风、番剧风...各种模板任你挑。支持 SRT、ASS、VTT 格式</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
      <div class="container">
        <div class="cta-content">
          <div class="cta-emoji">✨</div>
          <h2 class="cta-title">试试看？不用担心，完全免费</h2>
          <p class="cta-description">
            下载或者直接从源码运行都可以<br>
            有问题随时在 GitHub 提 Issue，社区会帮你
          </p>
          <div class="cta-buttons">
            <a href="/guide/getting-started" class="btn-cta-primary">
              <span>开始使用</span>
              <span class="btn-arrow">→</span>
            </a>
            <a href="/guide/faq" class="btn-cta-secondary">
              <span>看看常见问题</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 绿色系配色 - 高对比度 */
.custom-home {
  --vc-green-primary: #10b981;
  --vc-green-dark: #047857;
  --vc-green-light: #6ee7b7;
  --vc-text-strong: #1a1a1a;
  --vc-text-body: #4b5563;
  --vc-bg-soft: #f9fafb;
}

.dark .custom-home {
  --vc-text-strong: #ffffff;
  --vc-text-body: #d1d5db;
  --vc-bg-soft: #1f2937;
  --vc-green-primary: #34d399;
  --vc-green-dark: #10b981;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Hero Section */
.hero-section {
  position: relative;
  padding: 6rem 0 4rem;
  overflow: hidden;
  background: var(--vp-c-bg);
}

.hero-bg-decoration {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--vc-bg-soft);
  color: var(--vc-green-dark);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 2rem;
  border: 1.5px solid var(--vc-green-primary);
}

.dark .hero-badge {
  background: rgba(16, 185, 129, 0.15);
  color: var(--vc-green-light);
  border-color: var(--vc-green-primary);
}

.badge-emoji {
  font-size: 1.1rem;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  color: var(--vc-text-strong);
}

.gradient-text {
  color: var(--vc-green-primary);
}

.hero-description {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--vc-text-body);
  margin: 0 0 1.5rem;
}

.hero-stats-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
  font-size: 0.9375rem;
  color: var(--vc-text-body);
}

.stat-inline {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background: var(--vc-bg-soft);
  border-radius: 8px;
}

.stat-divider {
  opacity: 0.3;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--vc-green-primary);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: var(--vc-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.btn-arrow {
  transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(2px);
}

.btn-secondary {
  background: var(--vp-c-bg);
  color: var(--vc-text-body);
  border: 1.5px solid var(--vp-c-divider);
}

.btn-secondary:hover {
  border-color: var(--vc-green-primary);
  color: var(--vc-green-primary);
  background: var(--vc-bg-soft);
}

.hero-visual {
  position: relative;
}

.visual-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
}

.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--vc-green-1), var(--vc-green-3));
}

.visual-card img {
  width: 100%;
  height: auto;
  display: block;
}

.card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.375rem 0.75rem;
  background: rgba(16, 185, 129, 0.9);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
}

/* Stats Section */
.stats-section {
  padding: 3rem 0;
  border-top: 1px solid var(--vp-c-divider);
  border-bottom: 1px solid var(--vp-c-divider);
  background: var(--vc-bg-soft);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--vc-green-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9375rem;
  color: var(--vc-text-body);
  font-weight: 500;
}

/* Features Section */
.features-section {
  padding: 5rem 0;
  background: var(--vp-c-bg);
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--vc-text-strong);
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--vc-text-body);
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature-card {
  padding: 2rem;
  background: var(--vc-bg-soft);
  border-radius: 12px;
  border: 1px solid var(--vp-c-divider);
  transition: all 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--vc-green-primary);
}

.feature-icon-wrap {
  display: inline-flex;
  padding: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 10px;
  margin-bottom: 1.25rem;
}

.feature-icon {
  font-size: 2rem;
  line-height: 1;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--vc-text-strong);
}

.feature-desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--vc-text-body);
  margin: 0;
}

/* CTA Section */
.cta-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--vc-green-primary) 0%, var(--vc-green-dark) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.cta-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-emoji {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.cta-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  color: white;
}

.cta-description {
  font-size: 1.125rem;
  margin: 0 0 2rem;
  opacity: 0.95;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cta-primary, .btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-cta-primary {
  background: white;
  color: var(--vc-green-dark);
  border: none;
}

.btn-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-cta-primary:hover .btn-arrow {
  transform: translateX(2px);
}

.btn-cta-secondary {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 960px) {
  .hero-section .container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-visual {
    order: -1;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-section {
    padding: 4rem 0 3rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-stats-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .stat-divider {
    display: none;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-cta-primary, .btn-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}
</style>
